<template>
  <el-dialog
    custom-class="second-dialog"
    title="选择节点"
    v-model="visibleDialog"
  >
    <DynamicTable
      class="table-container"
      :total="total"
      v-model:current="page.current"
      v-model:size="page.size"
      :data="list"
      :columns="tableColumns"
      @pagination="getList"
    />
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visibleDialog = false"> 取消 </el-button>
        <el-button type="primary" @click="save"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script>
import DynamicTable from "@/components/DynamicTable";
import { getNodePageList } from "@/api/adaptation.js";
import {
  ref,
  reactive,
  watch,
  computed,
  defineComponent,
  onMounted,
} from "vue";
import { useListManage } from "@/hooks";
export default defineComponent({
  name: "DeptSelect",
  components:{DynamicTable},
  props: {
    visible: {
      type: Boolean,
      require: true,
    },
    modelValue: {
      type: Object,
      default: () => {},
    },
  },
  emits: ["update:visible", "update:modelValue"],
  setup(props, { emit, slots }) {
    const query = reactive({});
    let {
      page,
      list,
      total,
      height,
      currentItem,
      refresh,
      listLoading,
      handleUpdate,
      getList,
    } = useListManage(props, emit, {
      getItems: getNodePageList,
      query: query,
      getDetail: null,
      //   tableHeight: document.body.offsetHeight - 220
    });
    const tableColumns = ref([
      { key: "nodeIp", label: "节点IP" },
      { key: "port", label: "端口" },
      { key: "memo", label: "备注" },
    ]);
    const ruleForm = reactive({
      deptId: null,
      appId: null,
    });
    const tableData = ref([]);
    const multipleSelection = ref([]);
    const selectionChange = (val) => {
      multipleSelection.value = val;
    };
    const getNodeList = async () => {
      let res = await getNodePageList({});
    };

    const options = ref([]);
    const visibleDialog = computed({
      get: () => props.visible,
      set: (val) => emit("update:visible", val),
    });
    const save = () => {
      const appId = ruleForm.appId;
      let appName = null;
      options.value.map((item) => {
        item.id === appId && (appName = item.appName);
      });
      // console.log(props.modelValue);
      // console.log(appId);
      // console.log(appName);
      const data = {
        ...props.modelValue,
        appId,
        appName,
      };
      // console.log(data);
      emit("update:modelValue", data);
      visibleDialog.value = false;
    };
    onMounted(() => {
      getList();
    });
    watch(
      () => ruleForm.deptId,
      (value) => {
        getList(value);
      }
    );
    watch(
      () => visibleDialog,
      (value) => {
        if (value) {
          ruleForm.deptId = null;
          ruleForm.appId = null;
          options.value = [];
        }
      }
    );
    return {
      page,
      list,
      total,
      height,
      currentItem,
      refresh,
      listLoading,
      handleUpdate,
      getList,
      ruleForm,
      options,
      visibleDialog,
      save,
      tableData,
      selectionChange,
      tableColumns
    };
  },
});
</script>
<style lang="scss"></style>
